<template>
  <div style="height: 100%; width: 100%;">
    <!-- 自动机器学习 分类 -->
    <div class="tree">
      <div class="m_title">
        <div class="divider"></div>
        <strong>模型结果</strong>
      </div>
      <div class="result">
        <strong
          >提示：以下为本次机器学习所使用的模型及各个模型使用的参数说明</strong
        >
        <a-table
          class="table"
          :columns="columns"
          :data-source="souceData"
          bordered
        >
          <span slot="data" slot-scope="text, record">
            {{ record.data_preprocessing }}
          </span>
          <span slot="feature" slot-scope="text, record">
            {{ record.feature_preprocessor }}
          </span>
          <span slot="parameters" slot-scope="text, record">
            {{ record.model_parameters }}
          </span>
        </a-table>
      </div>

      <div class="m_title">
        <div class="divider"></div>
        <strong>整体评估</strong>
      </div>
      <table class="lr_table">
        <tr>
          <th scope="row">MSE</th>
          <th scope="row">MAE</th>
          <th scope="row">RMSE</th>
          <th scope="row">R²</th>
          <th scope="row">R²adj</th>
        </tr>
        <tr>
          <td>{{ modelData.data ? modelData.data.MSE : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.MAE : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.RMSE : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.r2 : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.r2adj : '-' }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: {},
})
export default class AutoRegression extends Vue {
  public featureImportance: any = []
  public data: any = []
  public featureString: string | null = null
  public labelListString: string | null = null

  public columns = [
    {
      title: '模型',
      key: 'model',
      dataIndex: 'model',
      scopedSlots: { customRender: 'model' },
    },
    {
      title: '权重',
      key: 'weight',
      dataIndex: 'weight',
      scopedSlots: { customRender: 'weight' },
    },
    {
      title: '数据预处理',
      dataIndex: 'data',
      key: 'data',
      scopedSlots: { customRender: 'data' },
    },
    {
      title: '特征预处理',
      dataIndex: 'feature',
      key: 'feature',
      scopedSlots: { customRender: 'feature' },
    },
    {
      title: '模型参数',
      dataIndex: 'parameters',
      key: 'parameters',
      scopedSlots: { customRender: 'parameters' },
    },
  ]
  public souceData = []

  public get modelData() {
    return DataViewStore.selectModel
  }

  @Watch('modelData.data')
  public getModelData() {
    this.init()
  }

  public created() {
    this.init()
  }

  public init() {
    this.souceData = this.modelData?.data?.model_info
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 22px;

  b {
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}

.result {
  span {
    margin-left: 16px;
  }

  .table {
    margin: 16px 0;
  }
}

.lr_table {
  border-collapse: collapse;
  border-color: #e8e8e8;
  line-height: 36px;
  min-height: 36px;
  text-align: center;
  width: 100%;

  th {
    background: #fafafa;
  }
}

.lr_table tr th,
.lr_table tr td {
  border: 1px solid #e8e8e8;
}
</style>
